<template>
  <div class="role-permission-management-container">
    <!-- 搜索区域 - 独占一行 -->
    <div class="search-container">
      <common-search
        v-model="searchForm"
        :search-items="searchItemsConfig"
        @search="handleSearch"
        @reset="fetchRoleData"
      />
    </div>

    <div class="content-container">
      <div class="role-management-container">
        <!-- 操作按钮区域 -->
        <action-buttons
          :buttons="{
            add: { 
              visible: true, 
              order: 1, 
              type: 'success',
              customLabel: '新增角色'
            }
          }"
          @add="handleAddNewRow"
        />

        <!-- 角色表格区域 -->
        <div class="table-container">
          <el-table
            ref="roleTable"
            v-loading="tableLoading"
            :data="roleData"
            style="width: 100%"
            @current-change="handleCurrentChange"
            :highlight-current-row="true"
            :row-class-name="rowClassName"
            row-key="id"
            border
			height="550px"
          >
            <el-table-column type="index" width="50" label="#" />
            <el-table-column width="60" align="center">
              <template #default="scope">
                <el-checkbox
                  v-model="scope.row.isSelected"
                  @change="() => handleCheckboxChange(scope.row)"
                >
                  <!-- 不显示label文本 -->
                </el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="角色名称" width="130">
              <template #default="scope">
                <el-input
                  v-if="currentRole && currentRole.id === scope.row.id"
                  v-model="scope.row.name"
                  placeholder="请输入角色名称"
                  size="small"
                />
                <span v-else>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="描述">
              <template #default="scope">
                <el-input
                  v-if="currentRole && currentRole.id === scope.row.id"
                  v-model="scope.row.description"
                  placeholder="请输入角色描述"
                  size="small"
				  type="textarea"
                  maxlength="100"
                  :rows="3"
				  show-word-limit
                />
                <span v-else>{{ scope.row.description }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button size="small" type="danger" @click="handleDeleteSingleRow(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 权限设置区域 -->
      <div class="permission-container">
        <div class="permission-header">
          <div class="permission-tabs">
            <el-tabs v-model="activeTab">
              <el-tab-pane label="菜单权限" name="menu"></el-tab-pane>
              <el-tab-pane label="数据权限" name="data"></el-tab-pane>
              <el-tab-pane label="隐私权限" name="privacy"></el-tab-pane>
              <el-tab-pane label="PDA权限" name="pda"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="save-button">
            <el-button type="primary" @click="handleSavePermissions" :disabled="!currentRole">保存</el-button>
          </div>
        </div>

        <div class="permission-content">
          <!-- 菜单权限 -->
          <div v-show="activeTab === 'menu'" class="menu-permissions">
            <el-tree
              ref="menuTree"
              :data="menuPermissions"
              show-checkbox
              node-key="id"
              :props="{ children: 'children', label: 'name' }"
              :default-checked-keys="checkedMenuKeys"
              @check="handleMenuCheck"
            />
          </div>

          <!-- 数据权限 -->
          <div v-show="activeTab === 'data'" class="data-permissions">
            <!-- 开启数据权限控制 -->
            <div class="permission-item">
              <el-checkbox v-model="dataPermission.enabled">开启数据权限控制（若不勾选则拥有所有数据权限）</el-checkbox>
            </div>
            
            <!-- 仓库权限 -->
            <div class="permission-item">
              <div class="permission-item-title">仓库权限</div>
              <div class="permission-item-content">
                <el-radio-group v-model="dataPermission.warehouse.type">
                  <el-radio :label="'all'">所有仓库</el-radio>
                  <el-radio :label="'specified'">指定仓库</el-radio>
                </el-radio-group>
                <el-select 
                  v-if="dataPermission.warehouse.type === 'specified'"
                  v-model="dataPermission.warehouse.selected"
                  multiple
				  collapse-tags
				  collapse-tags-tooltip
                  placeholder="请选择仓库"
                  class="permission-select"
                >
                  <el-option label="A仓库" value="A"></el-option>
                  <el-option label="B仓库" value="B"></el-option>
                  <el-option label="C仓库" value="C"></el-option>
                </el-select>
              </div>
            </div>
            
            <!-- 商品档案 -->
            <div class="permission-item">
              <div class="permission-item-title">商品档案</div>
              <div class="permission-item-content">
                <el-radio-group v-model="dataPermission.product.type">
                  <el-radio :label="'all'">全部商品</el-radio>
                  <el-radio :label="'specified'">指定分类商品</el-radio>
                </el-radio-group>
                <el-select 
                  v-if="dataPermission.product.type === 'specified'"
                  v-model="dataPermission.product.selected"
                  multiple
				  collapse-tags
				  collapse-tags-tooltip
                  placeholder="请选择商品分类"
                  class="permission-select"
                >
                  <el-option label="A分类" value="A"></el-option>
                  <el-option label="B分类" value="B"></el-option>
                  <el-option label="C分类" value="C"></el-option>
                </el-select>
              </div>
            </div>
            
            <!-- 货主权限 -->
            <div class="permission-item">
              <div class="permission-item-title">货主权限</div>
              <div class="permission-item-content">
                <el-radio-group v-model="dataPermission.owner.type">
                  <el-radio :label="'all'">所有货主</el-radio>
                  <el-radio :label="'specified'">指定货主</el-radio>
                </el-radio-group>
                <el-select 
                  v-if="dataPermission.owner.type === 'specified'"
                  v-model="dataPermission.owner.selected"
                  multiple
				  collapse-tags
				  collapse-tags-tooltip
                  placeholder="请选择货主"
                  class="permission-select"
                >
                  <el-option label="A货主" value="A"></el-option>
                  <el-option label="B货主" value="B"></el-option>
                  <el-option label="C货主" value="C"></el-option>
                </el-select>
              </div>
            </div>
            
            <!-- 单据权限 -->
            <div class="permission-item">
              <div class="permission-item-title">单据权限</div>
              <div class="permission-item-content">
                <el-radio-group v-model="dataPermission.document.type">
                  <el-radio :label="'all'">所有单据</el-radio>
                  <el-radio :label="'company'">所在公司创建立单据</el-radio>
                  <el-radio :label="'department'">所在部门创建立单据</el-radio>
                  <el-radio :label="'self'">仅自己创建单据</el-radio>
                </el-radio-group>
              </div>
            </div>
            
            <!-- 客户权限 -->
            <div class="permission-item">
              <div class="permission-item-title">客户权限</div>
              <div class="permission-item-content">
                <el-radio-group v-model="dataPermission.customer.type">
                  <el-radio :label="'all'">所有客户</el-radio>
                  <el-radio :label="'specified'">指定客户</el-radio>
                </el-radio-group>
                <el-select 
                  v-if="dataPermission.customer.type === 'specified'"
                  v-model="dataPermission.customer.selected"
                  multiple
				  collapse-tags
				  collapse-tags-tooltip
                  placeholder="请选择客户"
                  class="permission-select"
                >
                  <el-option label="A客户" value="A"></el-option>
                  <el-option label="B客户" value="B"></el-option>
                  <el-option label="C客户" value="C"></el-option>
                </el-select>
              </div>
            </div>
            
            <!-- 供应商权限 -->
            <div class="permission-item">
              <div class="permission-item-title">供应商权限</div>
              <div class="permission-item-content">
                <el-radio-group v-model="dataPermission.supplier.type">
                  <el-radio :label="'all'">所有供应商</el-radio>
                  <el-radio :label="'specified'">指定供应商</el-radio>
                </el-radio-group>
                <el-select 
                  v-if="dataPermission.supplier.type === 'specified'"
                  v-model="dataPermission.supplier.selected"
                  multiple
				  collapse-tags
				  collapse-tags-tooltip
                  placeholder="请选择供应商"
                  class="permission-select"
                >
                  <el-option label="A供应商" value="A"></el-option>
                  <el-option label="B供应商" value="B"></el-option>
                  <el-option label="C供应商" value="C"></el-option>
                </el-select>
              </div>
            </div>
          </div>

          <!-- 隐私权限 -->
          <div v-show="activeTab === 'privacy'" class="privacy-permissions">
            <!-- 隐私权限内容 -->
          </div>

          <!-- PDA权限 -->
          <div v-show="activeTab === 'pda'" class="pda-permissions">
            <el-tree
              ref="pdaTree"
              :data="pdaPermissions"
              show-checkbox
              node-key="id"
              :props="{ children: 'children', label: 'name' }"
              :default-checked-keys="checkedPdaKeys"
              @check="handlePdaCheck"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 当前选中的标签页
const activeTab = ref('menu')

// 表格加载状态
const tableLoading = ref(false)

// 角色数据
const roleData = ref([])

// 当前编辑的角色
const currentRole = ref(null)

// 当前选中行的ID，用于单选框
const currentRowId = ref(null)

// 表格引用
const roleTable = ref(null)

// 搜索表单数据
const searchForm = reactive({
  name: ''
})

// 搜索项配置
const searchItemsConfig = [
  {
    label: '角色名称',
    prop: 'name',
    type: 'el-input',
    placeholder: '请输入角色名称',
    defaultVisible: true
  }
]

// 菜单权限数据
const menuPermissions = ref([
  {
    id: 1,
    name: '一级菜单',
    children: [
      {
        id: 11,
        name: '菜单名称'
      },
      {
        id: 12,
        name: '菜单名称'
      },
      {
        id: 13,
        name: '菜单名称'
      },
      {
        id: 14,
        name: '菜单名称'
      }
    ]
  },
  {
    id: 2,
    name: '一级菜单',
    children: [
      {
        id: 21,
        name: '菜单名称',
        children: [
          {
            id: 211,
            name: '查看按钮'
          },
          {
            id: 212,
            name: '编辑按钮'
          },
          {
            id: 213,
            name: '删除按钮'
          }
        ]
      }
    ]
  },
  {
    id: 3,
    name: '一级菜单',
    children: [
      {
        id: 31,
        name: '菜单名称'
      },
      {
        id: 32,
        name: '菜单名称'
      },
      {
        id: 33,
        name: '菜单名称'
      },
      {
        id: 34,
        name: '菜单名称'
      },
      {
        id: 35,
        name: '菜单名称'
      }
    ]
  },
  {
    id: 4,
    name: '一级菜单',
    children: [
      {
        id: 41,
        name: '菜单名称'
      },
      {
        id: 42,
        name: '菜单名称'
      },
      {
        id: 43,
        name: '菜单名称'
      },
      {
        id: 44,
        name: '菜单名称'
      }
    ]
  },
  {
    id: 5,
    name: '一级菜单',
    children: [
      {
        id: 51,
        name: '菜单名称'
      },
      {
        id: 52,
        name: '菜单名称'
      },
      {
        id: 53,
        name: '菜单名称'
      },
      {
        id: 54,
        name: '菜单名称'
      }
    ]
  }
])

// PDA权限数据
const pdaPermissions = ref([
  {
    id: 'inbound',
    name: '入库',
    children: [
      {
        id: 'inbound-direct',
        name: '直接入库'
      },
      {
        id: 'inbound-pickup',
        name: '按单入库'
      },
      {
        id: 'inbound-return',
        name: '上架'
      }
    ]
  },
  {
    id: 'outbound',
    name: '出库',
    children: [
      {
        id: 'outbound-order',
        name: '订单拣货'
      },
      {
        id: 'outbound-wave',
        name: '播种拣货'
      },
      {
        id: 'outbound-exchange',
        name: '条码换货'
      }
    ]
  },
  {
    id: 'internal',
    name: '库内',
    children: [
      {
        id: 'internal-query',
        name: '商品查询'
      },
      {
        id: 'internal-move',
        name: '库存移动'
      },
      {
        id: 'internal-transfer',
        name: '正次转换'
      }
    ]
  }
])

// 选中的菜单权限项
const checkedMenuKeys = ref([])

// 选中的PDA权限项
const checkedPdaKeys = ref([])

// 自增ID，用于创建新行
let nextId = 100

// 数据权限配置
const dataPermission = reactive({
  enabled: false,
  warehouse: {
    type: 'all',
    selected: []
  },
  product: {
    type: 'all',
    selected: []
  },
  owner: {
    type: 'all',
    selected: []
  },
  document: {
    type: 'all'
  },
  customer: {
    type: 'all',
    selected: []
  },
  supplier: {
    type: 'all',
    selected: []
  }
})

// 查询操作
const handleSearch = () => {
  fetchRoleData()
}

// 获取角色数据
const fetchRoleData = () => {
  tableLoading.value = true
  
  // 这里应该调用接口获取角色数据
  // 示例使用模拟数据
  setTimeout(() => {
    roleData.value = [
      { id: 1, name: '管理员', description: '管理员角色描述', isSelected: false },
      { id: 2, name: '技术员', description: '技术员角色描述', isSelected: false },
      { id: 3, name: '操作员', description: '操作员角色描述', isSelected: false },
      { id: 4, name: '审核员', description: '审核员角色描述', isSelected: false },
      { id: 5, name: '业务员', description: '业务员角色描述', isSelected: false },
	  { id: 6, name: '业务员', description: '业务员角色描述', isSelected: false },
	  { id: 7, name: '业务员', description: '业务员角色描述', isSelected: false },
	  { id: 8, name: '业务员', description: '业务员角色描述', isSelected: false },
	  { id: 9, name: '业务员', description: '业务员角色描述', isSelected: false },
	  { id: 10, name: '业务员', description: '业务员角色描述', isSelected: false },
	  { id: 11, name: '业务员', description: '业务员角色描述', isSelected: false },
	  { id: 12, name: '业务员', description: '业务员角色描述', isSelected: false },
	  { id: 13, name: '业务员', description: '业务员角色描述', isSelected: false },
	  { id: 14, name: '业务员', description: '业务员角色描述', isSelected: false },
	  { id: 15, name: '业务员', description: '业务员角色描述', isSelected: false }
    ].filter(item => item.name.includes(searchForm.name))
    
    // 更新自增ID
    if (roleData.value.length > 0) {
      const maxId = Math.max(...roleData.value.map(item => item.id))
      nextId = maxId + 1
      
      // 默认选中第一行
      setTimeout(() => {
        if (roleTable.value && roleData.value.length > 0) {
          roleTable.value.setCurrentRow(roleData.value[0])
          currentRole.value = roleData.value[0]
          roleData.value[0].isSelected = true
          loadRolePermissions(roleData.value[0].id)
        }
      }, 100)
    }
    
    tableLoading.value = false
  }, 300)
}

// 表格行类名
const rowClassName = ({ row }) => {
  let classes = []
  
  if (currentRole.value && row.id === currentRole.value.id) {
    classes.push('row-active')
  }
  
  if (row.isNew) {
    classes.push('row-new')
  }
  
  return classes.join(' ')
}

// 表格当前行变更事件
const handleCurrentChange = (row) => {
  if (!row) return
  
  // 设置当前角色
  currentRole.value = row
  // 更新所有行的选中状态
  roleData.value.forEach(item => {
    item.isSelected = item.id === row.id
  })
  
  // 加载角色权限
  loadRolePermissions(row.id)
}

// 单选框变更事件（改为多选框的变更事件）
const handleCheckboxChange = (row) => {
  // 先取消所有行的选中状态
  roleData.value.forEach(item => {
    if (item.id !== row.id) {
      item.isSelected = false
    }
  })
  
  // 确保当前行选中
  row.isSelected = true
  
  // 设置当前行
  if (roleTable.value) {
    roleTable.value.setCurrentRow(row)
  }
}

// 加载角色权限
const loadRolePermissions = (roleId) => {
  // 这里应该调用接口获取角色权限
  // 示例使用模拟数据
  setTimeout(() => {
    // 模拟不同角色有不同的权限
    if (roleId === 1) {
      // 菜单权限
      checkedMenuKeys.value = [11, 12, 13, 21, 211, 212, 31, 32, 41]
      
      // PDA权限
      checkedPdaKeys.value = ['inbound-direct', 'inbound-pickup', 'outbound-order', 'internal-query']
      
      // 模拟数据权限
      dataPermission.enabled = true
      dataPermission.warehouse.type = 'all'
      dataPermission.product.type = 'specified'
      dataPermission.product.selected = ['A', 'B']
      dataPermission.owner.type = 'all'
      dataPermission.document.type = 'all'
      dataPermission.customer.type = 'specified'
      dataPermission.customer.selected = ['A']
      dataPermission.supplier.type = 'all'
    } else if (roleId === 2) {
      // 菜单权限
      checkedMenuKeys.value = [11, 21, 211, 31, 41]
      
      // PDA权限
      checkedPdaKeys.value = ['inbound-direct', 'outbound-order']
      
      // 重置数据权限
      dataPermission.enabled = false
      dataPermission.warehouse.type = 'all'
      dataPermission.warehouse.selected = []
      dataPermission.product.type = 'all'
      dataPermission.product.selected = []
      dataPermission.owner.type = 'all'
      dataPermission.owner.selected = []
      dataPermission.document.type = 'all'
      dataPermission.customer.type = 'all'
      dataPermission.customer.selected = []
      dataPermission.supplier.type = 'all'
      dataPermission.supplier.selected = []
    } else {
      // 菜单权限
      checkedMenuKeys.value = [11, 31]
      
      // PDA权限
      checkedPdaKeys.value = []
      
      // 重置数据权限
      dataPermission.enabled = false
      dataPermission.warehouse.type = 'all'
      dataPermission.warehouse.selected = []
      dataPermission.product.type = 'all'
      dataPermission.product.selected = []
      dataPermission.owner.type = 'all'
      dataPermission.owner.selected = []
      dataPermission.document.type = 'all'
      dataPermission.customer.type = 'all'
      dataPermission.customer.selected = []
      dataPermission.supplier.type = 'all'
      dataPermission.supplier.selected = []
    }
  }, 300)
}

// 菜单树选择变更事件
const handleMenuCheck = (node, checkedNodes) => {
  // 可以在这里处理菜单权限的变更
  console.log('选中的节点:', node)
  console.log('选中状态:', checkedNodes)
}

// PDA树选择变更事件
const handlePdaCheck = (node, checkedNodes) => {
  // 可以在这里处理PDA权限的变更
  console.log('选中的PDA节点:', node)
  console.log('PDA选中状态:', checkedNodes)
}

// 保存权限设置
const handleSavePermissions = () => {
  if (!currentRole.value) {
    ElMessage.warning('请先选择一个角色')
    return
  }
  
  // 获取菜单树选中的菜单项
  const menuTree = document.querySelector('.menu-permissions .el-tree')
  const checkedMenuNodes = menuTree ? menuTree.__vueParentComponent.ctx.getCheckedNodes() : []
  const checkedMenuKeys = menuTree ? menuTree.__vueParentComponent.ctx.getCheckedKeys() : []
  
  // 获取PDA树选中的权限项
  const pdaTree = document.querySelector('.pda-permissions .el-tree')
  const checkedPdaNodes = pdaTree ? pdaTree.__vueParentComponent.ctx.getCheckedNodes() : []
  const checkedPdaKeys = pdaTree ? pdaTree.__vueParentComponent.ctx.getCheckedKeys() : []
  
  // 保存角色和权限
  if (currentRole.value.isNew) {
    // 验证角色名称不能为空
    if (!currentRole.value.name.trim()) {
      ElMessage.warning('角色名称不能为空')
      return
    }
    
    // 新角色，调用新增接口
    console.log('保存新角色:', currentRole.value)
    currentRole.value.isNew = false
  } else {
    // 编辑角色，调用更新接口
    console.log('更新角色:', currentRole.value)
  }
  
  // 保存权限设置
  console.log('保存角色权限:', currentRole.value)
  console.log('菜单权限:', checkedMenuKeys)
  console.log('PDA权限:', checkedPdaKeys)
  
  ElMessage.success('角色及权限设置保存成功')
}

// 新增空行
const handleAddNewRow = () => {
  const newRow = {
    id: nextId++,
    name: '',
    description: '',
    isNew: true,
    isSelected: false
  }
  
  roleData.value.unshift(newRow)
  
  // 选中新行
  setTimeout(() => {
    if (roleTable.value) {
      // 取消所有行的选中状态
      roleData.value.forEach(item => {
        item.isSelected = item.id === newRow.id
      })
      
      roleTable.value.setCurrentRow(newRow)
      currentRole.value = newRow
      checkedMenuKeys.value = [] // 新角色没有权限
    }
    
    // 自动聚焦到名称输入框
    const firstInput = document.querySelector('.el-table .el-input input')
    if (firstInput) {
      firstInput.focus()
    }
  }, 100)
}

// 删除单行数据
const handleDeleteSingleRow = (row) => {
  // 如果是新行，直接移除
  if (row.isNew) {
    const index = roleData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      roleData.value.splice(index, 1)
    }
    
    // 如果删除了当前选中的角色，则清空权限显示
    if (currentRole.value && currentRole.value.id === row.id) {
      currentRole.value = null
      checkedMenuKeys.value = []
      
      // 如果还有其他角色，选中第一个
      if (roleData.value.length > 0 && roleTable.value) {
        setTimeout(() => {
          roleTable.value.setCurrentRow(roleData.value[0])
          currentRole.value = roleData.value[0]
          // 更新所有行的选中状态
          roleData.value.forEach(item => {
            item.isSelected = item.id === roleData.value[0].id
          })
          loadRolePermissions(roleData.value[0].id)
        }, 100)
      }
    }
    
    return
  }
  
  ElMessageBox.confirm('确定要删除该角色吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该调用接口删除角色
    console.log('删除角色:', row)
    
    // 模拟成功
    ElMessage.success('角色删除成功')
    
    // 删除本地数据
    const index = roleData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      roleData.value.splice(index, 1)
    }
    
    // 如果删除了当前选中的角色，则清空权限显示
    if (currentRole.value && currentRole.value.id === row.id) {
      currentRole.value = null
      checkedMenuKeys.value = []
      
      // 如果还有其他角色，选中第一个
      if (roleData.value.length > 0 && roleTable.value) {
        setTimeout(() => {
          roleTable.value.setCurrentRow(roleData.value[0])
          currentRole.value = roleData.value[0]
          // 更新所有行的选中状态
          roleData.value.forEach(item => {
            item.isSelected = item.id === roleData.value[0].id
          })
          loadRolePermissions(roleData.value[0].id)
        }, 100)
      }
    }
  }).catch(() => {})
}

// 监听当前角色变化
watch(currentRole, (newVal) => {
  if (!newVal) return
  
  // 确保表格当前行与currentRole一致
  if (roleTable.value) {
    roleTable.value.setCurrentRow(newVal)
  }
})

// 页面初始化
onMounted(() => {
  fetchRoleData()
})
</script>

<style lang="scss" scoped>
.role-permission-management-container {
  padding: 20px;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  background-color: #fff;
  
  .search-container {
	  .common-search-container{
		  margin-bottom:0px;
	  }
  }
  
  .action-container{
	  margin:10px 0px;
  }
  
  .content-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex: 1;
    height: calc(100% - 60px); // 减去搜索区域高度和间距
  }
  
  .role-management-container {
    width: 33%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    .table-container {
      flex: 1;
      overflow: auto;
      
      :deep(.el-table) {
        .cell {
          line-height: 1.5;
        }
        
        .el-checkbox {
          margin-right: 0;
        }
      }
    }
    
    :deep(.row-active) {
      background-color: #f0f9eb;
    }
    
    :deep(.row-new) {
      background-color: #f8f8f8;
    }
  }
  
  .permission-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #ebeef5;
	border-top: none;
    background-color: #fff;
    
    .permission-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      
      .permission-tabs {
        flex: 1;
        padding: 10px 20px;
        
        :deep(.el-tabs__header) {
          margin-bottom: 0;
        }
        
        :deep(.el-tabs__nav-wrap:after) {
          height: 0;
        }
      }
      
      .save-button {
        padding-right: 20px;
      }
    }
    
    .permission-content {
      flex: 1;
      padding: 20px;
      overflow: auto;
      
      .menu-permissions, .pda-permissions {
        height: 100%;
      }
      
      .data-permissions {
        display: flex;
        flex-direction: column;
        gap: 16px;
        
        .permission-item {
          border-bottom: 1px solid #ebeef5;
          padding-bottom: 16px;
          
          &:last-child {
            border-bottom: none;
          }
          
          .permission-item-title {
            font-weight: bold;
            margin-bottom: 12px;
            min-width: 80px;
          }
          
          .permission-item-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            
            .permission-select {
              width: 240px;
            }
          }
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style> 